<template>
  <div class="doc_1">
    <p> <strong>注意⚠️：</strong> 为了用户体验更佳，建议优先使用 <a href="https://www.google.com/intl/zh-CN/chrome/" target="_blank">谷歌浏览器</a> 进行编辑。(Firefox火狐在删除的时候请使用delete，不要使用back回退按钮)。</p>
    <p></p>
    <h2 id="doc_1_1">1. 概述</h2>
    <p>建页（ <a href="https://jianye.hd.xxx.com" target="_blank">https://jianye.hd.xxx.com</a> ）是一个结合微博相关接口的创建移动端h5的建站网站，提供了文本，媒体，表单，插件，矢量组件等基础组件。如图PC编辑端（站点76  <a href="https://jianye.hd.xxx.com/#/h5edit/76" target="_blank">https://jianye.hd.xxx.com/#/h5edit/76</a> ）：</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560155036256-a5d2c98b-577e-4a36-b0b3-f0b47f5f548f.png?x-oss-process=image/resize,w_2000" alt="">
      </span>
    </p>
    <p></p>
    <p>发布后在移动端展示（如图：）</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560155167088-f5c786fb-099b-4b3c-bda6-a5fff1ff7cb5.png" alt="">
      </span>
    </p>
    <p></p>
    <p>下面是这个站点的制作视频，可以参看下，视频中的声音忽略啊</p>
    <p>
      <video muted src="https://static.hd.xxx.com/static/minisite/new_jy/doc/video/helpvideo0.mp4" preload="auto" webkit-playsinline="webkit-playsinline" playsinline="playsinline" poster="https://cdn.nlark.com/yuque/0/2019/jpeg/356936/1560158779174-2a0c1a11-166f-4ca5-9eab-a26ea595ab22.jpeg" controls="" controlslist="nodownload"></video>
    </p>
    <p>
      <video muted src="https://static.hd.xxx.com/static/minisite/new_jy/doc/video/helpvideo1.mp4" preload="auto" webkit-playsinline="webkit-playsinline" playsinline="playsinline" poster="https://cdn.nlark.com/yuque/0/2019/jpeg/356936/1560158873709-ed28250c-7a9b-4ea2-a7b8-b79929e7b451.jpeg" controls="" controlslist="nodownload"></video>
    </p>
    <p>
      <video muted src="https://static.hd.xxx.com/static/minisite/new_jy/doc/video/helpvideo2.mp4" preload="auto" webkit-playsinline="webkit-playsinline" playsinline="playsinline" poster="https://cdn.nlark.com/yuque/0/2019/jpeg/356936/1560159464620-adcab414-5f48-4a6d-9bb8-c494777c1775.jpeg" controls="" controlslist="nodownload"></video>
    </p>
    <p></p>
    <p>在第三个视频中预览的时候需要注意的几个问题：</p>
    <p>
      <ol>
        <li>appkey设置是否正确；</li>
        <li>按钮样式的调整；</li>
        <li>触发微博事件需要登录微博；</li>
      </ol>
    </p>
    <p></p>
    <p>除了提供通用建站的基础组件外，还提供了有别于其他建站站点的事件系统（微博相关事件如图1所示）。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559026430018-eb1675f0-7374-4804-baaa-92e5decc4709.png?x-oss-process=image/resize,w_378" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559026444143-dcb12ae6-4d8a-474f-8e49-e5281cb2d550.png?x-oss-process=image/resize,w_374" alt="">
      </span>
    </p>
    <p></p>
    <p>下面会以实例站点网址 <a href="https://jianye.hd.xxx.com/#/h5edit/77" target="_blank">https://jianye.hd.xxx.com/#/h5edit/77</a> 作为实例来简单的讲解下建页的基础布局及一些组件的通用功能。（如图2所示）是站点77编辑界面。</p>
    <p></p>

    <h2 id="doc_1_2">2. 左侧区域</h2>
    <p>左侧是页面和弹层的展示区，点击折叠面板可以收缩和展开对应的区域，折叠面板的右侧有+号，点击它可以创建页面也弹出，当鼠标悬停在对用的页面上时，有复制页面和删除页面的弹层弹出如图所示，当点击右侧的一个页面后，页面主编辑区域就会展示点击页面。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559009485540-0cec5d63-ad56-4254-81e5-cd3f60c899fd.png?x-oss-process=image/resize,w_428" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_1_3">3. 主编辑区域</h2>
    <p>在主编辑区域可以添加，删除，拖拽，编辑组件。在主编辑区域左下角有有快捷键按钮，点击可以查看建页支持的快捷键，右侧有一个+，-按钮可以放大和缩小移动端的可视区域的大小。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559008213692-a2b00e95-301e-4c45-abc0-991aa9c0b349.png?x-oss-process=image/resize,w_2000" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_1_4">4. 右侧属性编辑区域</h2>
    <p>右侧是页面，组件属性编辑区域，几乎在右侧区域中所做的所有变化在主区域中都有体现。在主区域中点击选中组件，右侧区域就会展示对用组件的可编辑属性，后面会对组件的属性有详细介绍。这个区域主要分为4大部分：组件属性，微博事件ui属性，尺寸和位置。</p>
    <h3>组件属性（如图所示</h3>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559010607107-6d72276e-2a77-4458-a704-66dc0c39ab95.png?x-oss-process=image/resize,w_366" alt="">
      </span>
    </p>
    <p>
      <ol>
        <li> <strong>通用属性：</strong> 通用属性中有组件的id（方便数据统计查看组件的统计结果），类型，组件是否可见（发布后有效果），组件是否是固定定位（组件位置不受多页面，滚动条位置的影响）及定位类型（提供在页面中9个位置的定位）。如下图，固定布局的开启和关闭与定位类型的组合后，组件的位置会有不同，这个需要多试试，体验下哪种是页面所需要的布局。</li>
        <li> <strong>组件属性：</strong> 组件属性是每个组件的个性化属性配置的面板，每个组件都会有不同，在使用中可以每个组件都试试，多熟悉才能灵活使用每个组件及多个组件配合才能创建出更丰富的页面。</li>
        <li> <strong>微博事件ui属性：</strong> 这个属性是专门为微博事件系统提供的，这个属性会动态的出现，当组件添加有ui的微博事件的时候就会出现对用的ui事件面板。</li>
        <li> <strong>尺寸和位置：</strong> 这个面板是为了方便编辑组件的大小和位置及前后层次而创建的。</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560136926906-ef691b22-cb14-43a8-bf6b-35285b79c889.png" alt="">
      </span>
    </p>
    <p></p>
    <h3>动画属性：（如下图）点击“添加动画”进入“选择动画”面板，鼠标移动上去后可以动态的看到动画效果，点击给组件添加一个动画效果。</h3>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560133706043-3ae74d1c-b07a-4c8c-968c-5c4efe763095.png" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560133665271-c6b44b90-6d5c-4d65-bdb8-4fca9d895a98.png" alt="">
      </span>
    </p>
    <p></p>
    <h3>事件属性：事件面板中也有一个“添加事件”按钮，可以添加“选择事件”面板中的事件。每一个事件的详细介绍请查看事件系统章节。这里需要概述的是每个事件都有操作方式和添加事件需要配置的参数，如下第一个图，投票的几个参数，我们可以设置投票的每天用户分配票数，限制总的投票数以及投票基数等参数。而下面的弹层事件设置指的是当一个组件添加多个微博事件（如图）的时候，当所有的微博事件都串行的执行完成后，会弹出一个弹层，而这个弹层的属性设置就是在这里设置的。</h3>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560133884443-ee0a0df9-f975-483c-9f45-4a7ded86140a.png" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1560133941002-53af48e6-248a-483c-bb22-a7cd02796196.png" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_1_5">5. 顶部组件区域</h2>
    <p>顶部提供了建站的基础组件文本，媒体，表单，插件，矢量组件等，使用这些基础组件就可以搭建一个内容丰富的页面。</p>
    <p>
      <ol>
        <li>
          文本组件：文本组件是一个多文本组件，当点击顶部菜单添加文本组件到页面中，右侧面板就会出现文本组件对应的编辑属性，除了文本的一些基础属性，如图，其中只有滚动条颜色需要特殊说明下，这个本来是专门为规则弹层为设置的，但是根据页面需求在制作中可以灵活使用（如上图所示，使用的是光色系滚动条样式）。
          <span>
            <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559011793207-8200faab-621b-4f13-a066-f1375f7d91c1.png?x-oss-process=image/resize,w_326" alt="">
            <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559012049104-1fbb5fe5-1fe0-4e7b-b96e-2c9d07c1647a.png?x-oss-process=image/resize,w_274" alt="">
          </span>
        </li>
        <li>媒体组件：媒体组件中都是一些基础属性，在右侧面板中多试几次就熟悉了。</li>
        <li>表单组件：表单组件中唯一需要注意的就是一个页面只能有一个提交事件。</li>
        <li>
          插件：插件中的只有底部菜单一个组件比较特别，如77站点是底部菜单的一种使用方式，每个页面都有一个结构几乎一样的底部菜单组件，还有一种的是将菜单的是否固定布局改为true，这样整个h5页面就只有一个底部菜单组件，多个页面公用一个底部菜单组件，当底部菜单为非长页在页面属性且在选中全局背景按钮后还提供了页面切换效果类型，如图
          <span>
            <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559013463088-7de09160-7158-423e-9941-3b5990a2176a.png?x-oss-process=image/resize,w_288" alt="">
          </span>
        </li>
        <li>矢量组件：矢量组件中提供的是一些丰富页面展示效果的组件，可以在页面中绘制一些矢量图形，特效背景等。</li>
      </ol>
    </p>
  </div>
</template>

<script>
  import { submenuMixin } from '@/views/child/doc/data/submenu';
  export default {
    mixins: [submenuMixin],
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/doc.scss';
</style>
